<template>
  <div class="FileSAearch" @mouseup="MicrophoneActive = false">
    <div class="FileSAearch-title">
      <h3>AI文件搜索</h3>
      <p>快速精准地查找用户指定或描述的文件，提升查找效率并简化文件管理流程。</p>
    </div>
    <div class="FileSAearch-search">
      <div class="FileSAearch-search-input">
        <div class="input-button" style="display: flex;">
          <div v-show="search.length > 0" @click="search = ''" class="icon-clear"></div>
          <div :class="`icon-Microphone ${MicrophoneActive ? 'Microphone-active' : ''}`"
            @mousedown="MicrophoneActive = true"></div>
          <el-button type="primary" @click="querySubmit">
            AI搜索
          </el-button>
        </div>
        <el-input class="textareaInput" resize="none" type="textarea" v-model="search" style="width: 100%;"
          placeholder="请输入">
          <!-- <template #suffix> -->
          <!-- </template> -->
        </el-input>
      </div>
    </div>
    <el-tabs v-model="activeName" class="FileSAearch-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0" v-if="!isEditor"></el-tab-pane>
      <el-tab-pane label="笔记" name="1" v-if="!isEditor"></el-tab-pane>
      <el-tab-pane label="文档" name="2" v-if="!isEditor"></el-tab-pane>
      <el-tab-pane label="图片" name="3" v-if="!isEditor"></el-tab-pane>
<!--      <el-tab-pane label="视频" name="4" v-if="!isEditor"></el-tab-pane>-->
      <div class="FileSAearch-tabs-content">
        <el-checkbox :class="{ indeterminate }" v-model="checkAll" @change="chekChageAll"
          :indeterminate="indeterminate">
          文件名
        </el-checkbox>
        <el-scrollbar height="340px">
          <el-checkbox-group v-model="checkAllList" @change="checkChageList">
            <el-checkbox style="margin:10px 0;" :label="item.id" :key="item.id" v-for="item in fileList" :value="item.url">
              <div class="tabs-content-item">
                <el-avatar shape="square" :size="36" :src="'http://igrsbj.oss-cn-beijing.aliyuncs.com/jar/CloudBoard_xz/icons/folder.svg'" />
                <div class="item-name">
                  <p v-html="newName(item.name)"></p>
                  <p>{{ item.url }}</p>
                </div>
                <div style="position: absolute; right: 0;top: 50%;transform: translate(0,-50%);">{{ item.time }}</div>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </el-scrollbar>
        <div class="submit" v-show="checkAllList.length">
          <el-button @click="close">取消</el-button>
          <el-button @click="download" type="primary">{{ message }}({{ checkAllList.length }})</el-button>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import { getSearch,downloadFile,downloadFiles} from "@/api/index"
import { siftFile } from './index'

const search = ref('')
const activeName = ref('0')
const checkAll = ref(false)
const MicrophoneActive = ref(false)
const indeterminate = ref(false)
const fileList = ref([])
const oldFileList = ref([])
const checkAllList = ref([])
const emit = defineEmits(['download', 'close'])

const prop = defineProps({
  message: {
    type: String,
    default: '下载'
  },
  isEditor:{
    type: Boolean,
    default: false
  }
})
const chekChageAll = (val) => {
  checkAllList.value = val ? fileList.value.map(item => item.url) : []
  console.log(checkAllList.value)
}

onMounted(() => {
  initData()
})

const close = () => {
  checkAllList.value = [];
  checkAll.value = false;
  indeterminate.value = false
}

const download = () => {
  if (prop.message === '确认') {
    // console.log(FileList.value)
    // console.log(checkList.value)
    emit('download', checkAllList.value)
    return
  }
  if (checkAllList.value.length === 1) {
    downloadFile(checkAllList.value[0])
  } else if (checkAllList.value.length > 1) {
    downloadFiles(checkAllList.value.toString())
  }
}

const checkChageList = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === fileList.value.map(item => item.id).length
  indeterminate.value = checkedCount > 0 && checkedCount < fileList.value.map(item => item.id).length
  console.log(checkAllList.value)
}
const newName = computed(() => {

  return (name) => {
    let newname = name
    !!search.value && newname.includes(search.value) && (newname = newname.replace(search.value, `<span style='color: var(--el-color-primary);'>${search.value}</span>`))
    return newname
  }
})
const handleClick = (tab) => {
  activeName.value = tab.props.name
  fileList.value = siftFile(activeName.value, oldFileList.value)
}

const querySubmit = () => {
  initData(search.value)
}

const initData = async (str = '') => {
  activeName.value = "0"
  try {
    const { code, data } = await getSearch(str)
    if (code === 200) {
      fileList.value = data.map((item, index) => {
        const name = item[0].split('/')
        return { name: name[name.length - 1], url: item[0], id: index, time: item[1], suffix: item[1] }
      })
      console.log(fileList.value)
      oldFileList.value = [...fileList.value]
      if(prop.isEditor){
        fileList.value = siftFile(3, oldFileList.value)
      }
    }
  } catch (error) {

  }
}

</script>

<style lang="scss" scoped>
.FileSAearch {
  width: 100%;
  height: 100%;
  position: relative;

  .FileSAearch-title {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;

    h3 {
      color: var(--el-color-primary);
      margin-bottom: 4px;
    }

  }

  .FileSAearch-search {
    width: 100%;
    padding: 0 60px;
    margin-top: 32px;

    .FileSAearch-search-input {
      margin-top: 20px;
      position: relative;

      :deep(.textareaInput) {
        .el-textarea__inner {
          padding-right: 160px !important;
        }

        /* 隐藏默认的滚动条 */
        textarea::-webkit-scrollbar {
          width: 0;
          background: transparent;
          /* 将滚动条背景设置为透明 */
        }

        textarea {
          scrollbar-width: none;
          /* Firefox 隐藏滚动条 */
          -ms-overflow-style: none;
          /* IE 隐藏滚动条 */
        }
      }

      .input-button {
        display: flex;
        justify-content: end;
        align-items: center;
        position: absolute;
        width: 150px;
        right: 20px;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 1;



        .Microphone-active {
          background: url('@/assets/image/Microphone1.svg') no-repeat center;
          background-color: var(--el-color-primary);
        }

        div {
          &:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
    }
  }

  .FileSAearch-tabs {
    width: 100%;
    padding: 0 60px;

    :deep(.el-tabs__nav-scroll) {
      margin-top: 5px;
      padding-left: 10px;
      background-color: #fff;
      border-radius: 5px 5px 0 0;

      .el-tabs__nav {
        .el-tabs__item {
          &:nth-child(1) {}
        }
      }
    }

    :deep(.el-tabs__content) {
      background-color: #fff;
      border-radius: 0 0 5px 5px;
      margin-top: -14px;
      padding: 24px;
      height: 500px;

      .is-checked {
        .el-checkbox__label {
          color: #000;
        }
      }

      .el-checkbox__inner {
        border-radius: 50%;


        &::after {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          content: '✔';
          border-color: transparent;
          color: #fff;
          transform: rotate(0deg) translate(-36%, -12%) scale(0.6);
        }


      }
    }

    .FileSAearch-tabs-content {

      :deep(.el-checkbox) {
        width: 100%;
        height: 52px;

        .tabs-content-item {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;

          .item-name {
            margin-left: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: start;
          }
        }
      }

      .submit {
        width: 100%;
        position: absolute;
        display: flex;
        justify-content: end;
        align-items: center;
        left: 0;
        bottom: 0;
        height: 84px;
        padding: 24px 32px 24px 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        background: #FFF;
      }
    }
  }
}

.icon-Microphone {
  margin-right: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.5s;
  background: url('@/assets/image/Microphone.svg') no-repeat center;
}

.icon-clear {
  width: 16px;
  height: 16px;
  background: url('@/assets/image/clear.svg') no-repeat center;
}

:deep(.indeterminate) {
  .el-checkbox__inner {
    &::after {
      content: '' !important;
    }
  }
}
</style>
